<template>
  <div class="page play">
    <div class="pageHeader">
      <h1>
        <img src="~assets/img/logo.png" alt="" class="logo">
      </h1>
      <div class="back" @click="goBack">
        <img src="~assets/img/back.png" class="back-img">
        <span class="back-txt">
          返回
        </span>
      </div>
    </div>
    <div class="content">
      <div class="contentLeft">
        <div class="lbfilm" :style="{'background': `url(${detail.cover_url}) center center no-repeat`}">
          <div v-if="isVideo(detail.url)" class="play-btn" @click="preview">
            <img src="~assets/img/play.png" class="play-img" />
            <span>播放</span>
          </div>
        </div>
        <div class="info">
          <div class="info-title">
            {{detail.name}}
          </div>
          <div class="info-con">
            <!-- <div class="info-row">
              片长：10:12
            </div>
            <div class="info-row">
              出品方：炫彩
            </div> -->
            <div class="info-row">
              简介：{{detail.remark}}
            </div>
          </div>
        </div>
      </div>
      
    </div>


    <!-- 预览弹窗 -->
    <div class="modal" v-if="previewVisible">
      <div class="preview-dialog">
        <div class="dialog-content">
          <video
            :src="detail.url"
            class="video"
            autoplay="autoplay"
            controls="controls"
            controlslist="nofullscreen nodownload noremoteplayback disablePictureInPicture"
            :disablePictureInPicture="true"
          >
          </video>
        </div>
        <div class="dialog-button" @click="previewClose">
          <i class="el-icon-close" style="color: #f56c6c"></i>
        </div>
      </div>
    </div>
    
  </div>
</template>
<script>
import qs from "qs";
import { mapState } from 'vuex'
import getFileType from '@/utils/getFileType'
import * as api from '@/api'
export default {
  data() {
    return {
      previewVisible: false,
      detail: {}
    }
  },
  computed: {
    ...mapState(['playObj'])
  },
  methods: {
    preview() {
      this.previewVisible = true
    },

    previewClose() {
      this.previewVisible = false
    },

    goBack() {
      this.$router.go(-1)
    },

    parseStr() {
      let str = window.location.hash
      let obj = qs.parse(str)
      return obj          
    },

    isVideo(url) {
      return getFileType(url) === 'video'
    },

    // 8.6 资源详情
    async platformResourceDetail() {

      const { code, data } = await api.platform(this).platformResourceDetail({
        resource_id: this.playObj.content
      })
      if (code === 0) {
        this.detail = data
      }
    },
  },
  created () {
    this.platformResourceDetail()
  },
}
</script>
<style lang="stylus">
.play {
  padding:0 getPx(40) getPx(40)
  .content {
    position: absolute
    top: getPx(200)
    right: getPx(40)
    left: getPx(40)
    bottom: getPx(40)
    display:flex
    align-items center
    justify-content space-between
    .contentLeft {
      width: 50%
      height 100%
      padding: getPx(30) 0
      box-sizing: border-box
      margin-right:getPx(30)
      .lbfilm {
        width: getPx(600);
        height: getPx(300);
        background-size: cover !important;
        position: relative; 
        .video {
          width: 100%;
          height: 100%;  
        }
        .play-btn {
          height: getPx(80);
          background: rgba(255, 255, 255, .6);
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          font-size: getPx(20);
          padding-right: getPx(20);
          cursor: pointer;
          flexMiddle(flex-end);
          .play-img {
            width: getPx(52);  
            height: getPx(52);
            margin-right: getPx(10);  
          }
        }
      }
      .info {
        width: 100%;
        height: getPx(400);
        margin-top: getPx(20);
        .info-title {
          font-size: getPx(40);
          margin-bottom: getPx(30);
        }
        .info-row {
          margin-top: getPx(10);
          font-size: getPx(18); 
          line-height: getPx(24); 
        }
      }
    }
  }
}
</style>